import React, { useState, useEffect } from "react";
import { Space, Table, Tag, Button } from "antd";
import { $user } from "../../api";

export default function Role() {
  let [userList, setUserList] = useState([]);
  useEffect(() => {
    $user().then((data) => {
      setUserList(data[0]);
    });
  }, []);

  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
      render: (text) => <span>{text}</span>,
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "地址",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "标签",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "green";
            if (tag === "管理员") {
              color = "volcano";
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button size="small" danger> 删除 </Button>
          <Button size="small">编辑{record.name}</Button>
          {/* <Button size="small">编辑</Button> */}
        </Space>
      ),
    },
  ];

  return (
    <>
      <Table columns={columns} dataSource={userList} />
    </>
  );
}
